<template>
  <el-row class="search-wrapper">
    <el-row v-if="searchKey.length > 0" class="search-box fl">
      <el-form id="searchForm" ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <el-form-item v-for="(vo, i) in searchKey" :key="vo.key" :label="vo.title" :class="{ 'hide-item': i > 3, 'show-item': i > 3 && showItem }">
          <!-- 输入框 -->
          <edu-input v-if="vo.type == 'input'" :key="vo.key" :value.sync="searchForm[vo.key]" :args="vo.args" />
          <!-- 下拉框 -->
          <edu-select v-else-if="vo.type == 'select'" :key="vo.key" :options="getOptions(vo.args.options, vo.key)" :value.sync="searchForm[vo.key]" :args="vo.args" />
          <!-- 多级 -->
          <edu-cascader v-else-if="vo.type == 'cascader'" :key="vo.key" :options="getOptions(vo.args.options, vo.key)" :value.sync="cascader[vo.key]" :args="vo.args" />
          <!-- 日期-date -->
          <edu-date v-else-if="vo.type == 'date'" :key="vo.key" :options="getOptions(vo.args.options, vo.key)" :value.sync="searchForm[vo.key]" :args="vo.args" />
          <!-- 时间-time -->
          <edu-time v-else-if="vo.type == 'time'" :key="vo.key" :options="getOptions(vo.args.options, vo.key)" :value.sync="searchForm[vo.key]" :args="vo.args" />
          <!-- 搜索机构 -->
          <search-school v-else-if="vo.type == 'search_school'" :key="vo.key" :value.sync="searchForm[vo.key]" :args="vo.args" :form-datas="searchForm" />
          <!-- 自定义 -->
          <div v-else-if="vo.type == 'custom'">
            <component
              :is="customComponents[vo.key]"
              :key="vo.key"
              :value.sync="searchForm[vo.key]"
              :args="vo.args"
              :field="vo.key"
              :form-datas="searchForm"
              @update:data="updateData"
            />
          </div>
          <!-- @change="validateField(vo.key)" -->
        </el-form-item>
      </el-form>
    </el-row>
    <el-row v-if="searchKey.length > 0" class="search-btn fl">
      <el-button size="mini" type="primary" plain @click="doSearch">搜索</el-button>
      <!-- <el-button size="mini">导出</el-button> -->
      <el-button v-if="searchKey.length > 4" size="mini" type="text" class="btn-scaling" @click="showSearchMore">{{ searchItem }}</el-button>
    </el-row>
    <el-row class="search-operation fr"><slot name="page-button" /></el-row>
  </el-row>
</template>

<script>
import { mapState } from 'vuex';
import EduInput from '@public/form/input.vue';
import EduSelect from '@public/form/select.vue';
import EduCascader from '@public/form/cascader.vue';
import EduDate from '@public/form/date.vue';
import EduTime from '@public/form/time.vue';
import SearchSchool from '@/pages/school/choose';

export default {
  components: {
    EduInput,
    EduSelect,
    EduCascader,
    EduDate,
    EduTime,
    SearchSchool
  },
  props: {
    options: {
      type: Object,
      default: function() {
        return {};
      }
    },
    bindSearch: {
      type: Function,
      default: undefined
    },
    // 自定义组件
    customComponents: {
      type: Object,
      default: _ => {
        return {};
      }
    }
  },
  data() {
    return {
      searchForm: {},
      showItem: false,
      searchItem: '展开',
      cascader: {}
    };
  },
  computed: {
    ...mapState('pageList', {
      pageData: 'responseData'
    }),
    ...mapState('pageList/search', {
      searchKey: 'searchkeyList'
    })
  },
  watch: {
    cascader: {
      handler(datas) {
        Object.keys(datas).forEach(key => {
          const value = datas[key];
          const [val] = [...value].reverse();
          this.$set(this.searchForm, key, val);
        });
      },
      deep: true
    }
  },
  methods: {
    getOptions: function(options, field) {
      if (this.$util.getDefValue(options, false)) {
        return options;
      }

      if (this.$util.isDef(this.options[field])) {
        return this.options[field];
      }
      return [];
    },
    showSearchMore: function() {
      this.searchItem = this.showItem ? '展开' : '收起';
      return (this.showItem = !this.showItem);
    },
    doSearch: function() {
      this.$store.dispatch('pageList/search/setSearchDatas', this.searchForm);
      if (this.$util.isFunction(this.bindSearch)) {
        return this.bindSearch(this.searchForm);
      }
      const params = {
        page: 1,
        ...this.searchForm
      };
      // 触发paginate
      this.$store.dispatch('pageList/loadData', { params: params });
    },
    // 更新字段值
    updateData: function(data) {
      this.$set(this.searchForm, data.field, data.value);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-range-editor--mini.el-input__inner {
  width: 200px;
  // width: 240px;
}
::v-deep .el-date-editor .el-range__close-icon {
  width: 10px;
}
::v-deep .el-input__icon {
  width: 15px;
}
.search-wrapper {
  margin-left: 20px;
  // margin-right: 50px;
  margin-bottom: 5px;
  .search-box {
    max-width: 840px;
    // max-width: 750px;
    // height: 43px;
    // overflow: hidden;
    // flex-wrap: wrap;
    ::v-deep.el-input {
      width: 200px;
      // width: 240px;
    }
  }
  .search-btn {
    // width: 558px;
    height: 28px;
    .btn-scaling {
      color: #c0c4cc;
    }
  }
  .search-operation {
    // height: 28px;
    margin-right: 30px;
  }
}

.hide-item {
  display: none;
}
.show-item {
  display: inline-block;
}
</style>
